﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>実稼働状況集計</title>
	<jsp:include page="../basePage/head.jsp" />
    <jsp:include page="../basePage/jqplot.jsp" />       
    <script src="./js/util/globalajaxevent.js"></script>
    <script src="./js/util/lockGridColumn.js"></script>
    
	<style type="text/css">					 
		#searchType{width:100px}
		#week{width:10px}		
		#dataContainer{clear:both}
		.serachTypeArea{float:left}
		.serachArea{float:left}
		.hide{display:none}
		
	</style>

	<script>	
	function iniPage(){ 
		

		
		
		var toDate = getCurrentDay();
		var fromDate =  getPriorMonthDay();
		
	  	$("#week").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""}) ;
	  	
		$( "#dateFrom0").datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);		
		$( "#dateFrom1").datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);
		$( "#dateFrom2").datepicker({ dateFormat: 'yy-mm-dd'}).val(fromDate);
		
		$( "#dateTo1").datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);
		$( "#dateTo2").datepicker({ dateFormat: 'yy-mm-dd'}).val(toDate);
		
		$('#buttonSearch0,#buttonPrior0,#buttonNext0,#buttonSearch1,#buttonSearch2').button();		
		$('#buttonExport0,#buttonExport1,#buttonExport2').button();
	}
	
   
	$(function() {	
		
		var exportExcel = '${exportExcel}';
		if (exportExcel=='true'){
			$('#buttonExport0').show(); 
		}else{ 
			$('#buttonExport0' ).hide();
		}
		
		iniPage();		
	  	$('#searchType').multiselect(
	  			 {	selectedList: 1,header:false, multiple: false,noneSelectedText:"",
	  				close: function() {	    					
	  					var index =0;
						$('#searchType option').each(function(k,v){																
							if (v.value==$('#searchType').val()){
								index=k;
								return;
							}
						});							
						$("#searchbar > form").eq(index).show().siblings().hide();
						$("#dataContainer > div").eq(index).show().siblings().hide();	
						
						var exportExcel = '${exportExcel}';
						if (exportExcel=='true'){
							$('#buttonExport' + index ).show(); 
						}else{ 
							$('#buttonExport' + index ).hide();
						}
						
	  				} 
	  			 });	  		 
	  	

	  	$( "#buttonPrior0" ).button().click(function( event ) {	  		 
	  		 changeFromDate(-1);
	  		 buttonSearch0();
		 });
	  	
	  	$( "#buttonNext0" ).button().click(function( event ) {	  		 
	  		 changeFromDate(1);
	  		 buttonSearch0();
		 });
	  	
	  	 $( "#buttonSearch0" ).button().click(function( event ) {			 
	  		buttonSearch0();
		 });
	  	 
	  	 function changeFromDate(n)
	  	 {
	  		 var str =$( "#dateFrom0").datepicker({ dateFormat: 'yy-mm-dd'}).val(); 
	  		 str = changeDate(str,n);
	  		 $( "#dateFrom0").datepicker({ dateFormat: 'yy-mm-dd'}).val(str);	  	 
	  	 }
	  	 
	  	 function buttonSearch0()
	  	 {  
				$('#masterGrid_day,#detailGrid_day,#chartdiv_day').empty(); 
				
	  		 $.ajax({
			        type: "POST",
			        async: true,
			        url:"timeRUtilizationQuery!refreshChartData.action",
			        data:$('#dataForm0').serialize(),
					success: function (data) {
						
						if (data.chartData.Table.length==0 ||
							data.chartData.TableDetail.length==0){
							
							 $( "#noResult" ).dialog({modal:true});
							return;
							}
						outputGrid('masterGrid_day',data.chartData.Table,true);
						outputGrid('detailGrid_day',data.chartData.TableDetail,true);
						outputChart('chartdiv_day',data);
						
				      	var width=$("#masterGrid_day").width();     	  				      	
				     	$("#masterGrid_day_datagrid").setGridWidth(width);
				     	width=$("#detailGrid_day").width();				     	
				     	$("#detailGrid_day_datagrid").setGridWidth(width);
				     	
				     	setColumnsNoSort("#masterGrid_day_datagrid");
				    	setColumnsNoSort("#detailGrid_day_datagrid"); 
					},
			        error: function (err) {
						alert(err);
			        }
				});
	  	 };
	  	 
	  	 $( "#buttonSearch1" ).button().click(function( event ) {
	  		 
	 		$('#masterGrid_week,#detailGrid_week,#chartdiv_week').empty(); 
	 		
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"weekRUtilizationQuery!refreshChartData.action",
			        data:$('#dataForm1').serialize(),			         
					success: function (data) {
						
						if (data.chartData.Table.length==0 ||
							data.chartData.TableDetail.length==0){
							 
							 $( "#noResult" ).dialog({modal:true});
							return;	}
						
						outputGrid('masterGrid_week',data.chartData.Table,true); 						
						outputGrid('detailGrid_week',data.chartData.TableDetail,true);
						outputChart('chartdiv_week',data);
						
				      	var width=$("#masterGrid_week").width();     	  				      	
				     	$("#masterGrid_week_datagrid").setGridWidth(width);
				     	width=$("#detailGrid_week").width();				     	
				     	$("#detailGrid_week_datagrid").setGridWidth(width);
						
						setColumnsNoSort("#masterGrid_week_datagrid");
				    	setColumnsNoSort("#detailGrid_week_datagrid"); 
					},
			        error: function (err) {
						alert(err);
			        }
				});
	  	 });
	  	 
		 $( "#buttonSearch2" ).button().click(function( event ) {
				
			 $('#masterGrid_month,#detailGrid_month,#chartdiv_month').empty(); 
				
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"dayRUtilizationQuery!refreshChartData.action",
			        data:$('#dataForm2').serialize(),			         
					success: function (data) { 	
						
						if (data.chartData.Table.length==0 ||
							data.chartData.TableDetail.length==0){
							
							 $( "#noResult" ).dialog({modal:true});
							return;	}
						
						outputGrid('masterGrid_month',data.chartData.Table,false);
						outputGrid('detailGrid_month',data.chartData.TableDetail,false);
						outputChart('chartdiv_month',data);
						
				      	var width=$("#masterGrid_month").width();     	  				      	
				     	$("#masterGrid_month_datagrid").setGridWidth(width);
				     	width=$("#detailGrid_month").width();				     	
				     	$("#detailGrid_month_datagrid").setGridWidth(width);
				     	
						setColumnsNoSort("#masterGrid_month_datagrid");
				    	setColumnsNoSort("#detailGrid_month_datagrid");
						
				  	  	setFrozenColumns("#masterGrid_month","#masterGrid_month_datagrid",0);
				  	  	setFrozenColumns("#detailGrid_month","#detailGrid_month_datagrid",3);				     	
					},
			        error: function (err) {
						alert(err);
			        }
				});
		 });	

			$( "#buttonExport0").button().click(function( event ) {
				$('#dataForm0').attr('action','timeRUtilizationExport!export.action').submit();
			});
			$( "#buttonExport1").button().click(function( event ) {
				$('#dataForm1').attr('action','weekRUtilizationExport!export.action').submit();
			});
			$( "#buttonExport2").button().click(function( event ) {
				$('#dataForm2').attr('action','dayRUtilizationExport!export.action').submit();
			});
			
	});
	
	function outputChart(target,data){
		$('#' + target).empty();
		if(data == null ||
		   data.length==0 || 
		   data.chartData ==0 ||
		   data.chartData.WorkTime ==0 ||
		   data.chartData.TotalTime ==0 ||
		   data.chartData.LdTime ==0 ||
		   data.chartData.SdTime ==0 ||
		   data.chartData.WorkTime==0)  return;
		   
		var plabelsNoWrokTime=[];
		for(var i=0;i<data.chartData.NoWorkTime.length;i++){			
			plabelsNoWrokTime.push(data.chartData.NoWorkTime[i][1]);
		}
		var unit ='H';
		if (target == 'chartdiv_month')
		{ unit = '人';}
		
		$.jqplot(target, 
				  [data.chartData.WorkTime,
				   data.chartData.TotalTime,
                   data.chartData.LdTime,
		           data.chartData.SdTime,		                                   						                                   
		           data.chartData.WorkTime], 
				  {		    
					// Turns on animatino for all series in this plot.
	        		animate: true,
	        		// Will animate plot on calls to plot1.replot({resetAxes:true})
	        		animateReplot: true,
		     		//动画用      
		    		axesDefaults: {pad: 0},		            
	        		//图例
	        		legend:{
	        			show:true,
	        			placement :"outsideGrid",
	        			fontFamily: 'MS PGothic',
	        			fontSize: '8pt',
	        			renderer: $.jqplot.EnhancedLegendRenderer,
		        		rendererOptions: {numberColumns: 1}	
	        		},		     
		     		//柱状图
		    		series:[{renderer:$.jqplot.BarRenderer,label: '非稼働',color:'#ccc7ba',
		            	     rendererOptions: { animation: { speed: 2500 }, stackSeries: true,	barWidth: 15, barPadding: -15, barMargin: 10, highlightMouseOver: false },
		            	     pointLabels:{ show:true, labels: plabelsNoWrokTime,   ypadding: -20,  escapeHTML:false}
		                    }, 
		                    {renderer:$.jqplot.BarRenderer,label: '総稼動', stackSeries: true,color:'#BCF808',
		            	     rendererOptions: { animation: { speed: 2500 }, barWidth: 15, barPadding: -15, barMargin: 10,highlightMouseOver: false },
		            	     pointLabels:{ show:true,  ypadding: -25,  escapeHTML:false}
		                    },		           
		                    {renderer:$.jqplot.BarRenderer,label: '長納期対応',color:'#7FD4FF',
		            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: true,barWidth: 15, barPadding: 0, barMargin: 10,highlightMouseOver: false },
		            	     pointLabels:{ show:false}
		                    }, 
		                    {renderer:$.jqplot.BarRenderer,label: '短納期対応',color:'#ff99cc',
		            	     rendererOptions: { animation: { speed: 2500 },  stackSeries: true,barWidth: 15, barPadding: -20, barMargin: 10,highlightMouseOver: false },
		            	     pointLabels:{ show:false}
		                    }, 
		                    {xaxis:'x2axis', yaxis:'y2axis'
		                    },
		                    {rendererOptions: {animation: {speed: 2000}}
		                    }],
		            //折线图
		    		seriesDefaults: {label: '実際総出勤',
		    						 color:'#FABF66',
		    						 pointLabels: { show: true },
		    						 showMarker:true,						    	
		    	  					 markerOptions: {show: true}						    	
		    				},		   
		     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
		     			 tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}							
		    				},  
		    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
		      			   x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}},
		      			   yaxis: {autoscale:true,min:0,max:800,tickInterval:200,
		      				 tickOptions: {showGridline: true,formatString:'%.0f' + unit}},
		      			   y2axis: { autoscale:true,min:0,max:800,tickInterval:200 ,
		      				   tickOptions: {showGridline: true,formatString:'%.0f' + unit}}
		    			  	},
		 			//mark上高亮    
	     			highlighter: {
	     				show: true,
	     				sizeAdjust: 7.5,
	     				tooltipAxes: 'y'
	     				},
	      			//鼠标移动 显示坐标位置数据
	      			cursor: {show: false}
		  }).replot();
	}
	
	function outputGrid(target,data,atuowidth){		
  		$('#' + target ).empty();  		  	
		if(data == null || data.length==0  ) return;
		
   		var row =[];
		for(var i=0;i<data.length  ;i++){				 							
			row.push($("<tr></tr>"));				 
		}  ;
		
	   	$('#' + target).empty().append('<table id=' + target + '_datagrid><tbody></tbody></table>');
		var table = $('#' + target + ' tbody');

	    var j=0;
  		$.each(data,function(key,value){
  			var index=0;
  			$.each(value,function(k,v){  			  			
  	  		     
  	  			var th = $("<th id =" + index + " nowrap='nowrap'></th>");
  	  			var td = $("<td nowrap='nowrap' ></td>");
  	  			
  	  		    if (j ==0 ){		
					th.append(v);
  	  	        	th.appendTo(row[j]);
  	  	        }
  	  		    else{					  	  				
  	  				td.append(v);
  	  				td.appendTo(row[j]);
  	  		    }
  	  	    	index++;
  			});  			
  			j++;
  		});
  		for(var i=0;i<row.length;i++){
  			row[i].appendTo(table);			
		};		
		
	   var caption ="";
	   
	   if (target.substring(0,6)=="master"){
		 caption = "基礎情報";   
	   }
	   else{
		   caption = "案件稼動状況明細 ";
	   }
	
	   //set column width	
	   var ColModel='';
		  var Colwidth = 0;
		  for(var i=0;i<data[0].length  ;i++){				 							
		   if ( ColModel.length>0){
			   ColModel += ',';} 
		
		       if (target.substring(0,6)== "master"){ 
			       if (i==0){
			    	   Colwidth = 100;
			       } else {
			    	   Colwidth =60;
			       }
		       }else if(target.substring(0,6)== "detail"){ 
			       if (i==0){
			    	   Colwidth = 40;
			       } else {
			    	   Colwidth = 56;
			       }
		       }
		  
			   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "center",sortable:false} '; 
		  }  ;
		  
  		//tableToGrid(target + ' table',{
   		tableToGrid('#' + target+"_datagrid",{
  			//datatype: "local",  
  			autoWidth:atuowidth,  			  
  			height: "100%",           	  	
         	caption: caption,// "基礎情報",
         	colModel:eval("([" + ColModel + "])"),
			shrinkToFit: false,   	
			gridComplete:function(){				
				 paintColor(target); 
				fiexedRow(target);
			}
  		  });   		   	
	};	
  	
  	function paintColor(target){  		  	
  		$('#' + target + '_datagrid tr').each(function(){
  			
  			if(target.substring(0,6)=="master")
  			{
  				 $(this).children("td").eq(0).nextAll().css("text-align",'right'); 
  	 			
  	 			
  			}else if(target.substring(0,6) == "detail")
  			{
  				 $(this).children("td").eq(3).nextAll().css("text-align",'right');
  			}
  			
  			
  		
			var v=$(this).children("td:first").text();
			var color='';
			if (v=="曜日") {
	    		color ="#ffffe1";
	    		 $(this).children("td").eq(0).nextAll().css("text-align",'center');
	    	}else if (v=="長納期対応"){
	    		color = "#7FD4FF";
	    	}else if (v=="短納期対応"  || v=="短納期"  ){
	    		color = "#ff99cc";
	    	}else if (v=="総稼動"){
	    		color = "#BCF808";
	    	}else if (v=="実際総出勤"){
	    		color = "#7fffff";
	    	}else if (v=="非稼働"){
	    		color = "#eaeaea";
	    	}else if (v=="実稼働率"){
	    		color = "#FABF66";		  
	    		$(this).children("td").nextAll().filter(function(index) {    				  					
						  return  $.trim($(this).text())!='' 
							&&  $(this).text().length > 5;   			  				
					}).css('color', 'red');
	    	}									
			$(this).children("td:first").css("background",color);			
			
			var color='';
			var v=$(this).children("td").eq(3).text();
			if ( v=="短納期"  )
	    		color = "#ff99cc";
			$(this).children("td").eq(3).css("background",color);	
		});	
  		
  		$('#' + target + '_datagrid tr:eq(1) td').each(function(){
			var v = $(this).text();
			var color='';
	    	if (v=="曜日" || v=="月"|| v=="火"|| v=="水"|| v=="木"|| v=="金"|| v=="-") {
  		    		color ="#ffffe1";
  		    		$(this).css("background",color);		
  		    }
			else if (v=="短納期対応" || v=="土" || v=="日"){
  		    		color = "#ff99cc";
  		    		$(this).css("background",color);
			}
  		});
  		
  		$('#' + target + '_datagrid tr').each(function(){
			var v=$(this).children("td:first").text();
			if (v=='合計'){				
				$(this).css("background","#ffffe1").find('td').css("font-weight", "bold");
				return;
			}
		});
  	}
  	
	function fiexedRow(target){					
		$('#'+target+'_datagrid  tr').each(function(){
  			var v=$(this).children("td:first").text();
  			if (v=='曜日'){
  				if( $(this).index() !=1){		  		
   					var rowid=$(this).attr('id');
  					var rowData = $('#'+target+'_datagrid').jqGrid ('getRowData',rowid );
  					$('#'+target+'_datagrid').delRowData(rowid); 
  					$('#'+target+'_datagrid').jqGrid('addRowData', undefined, rowData, "first");  					
  				}
  				return;
  			}
		});
		$('#'+target+'_datagrid  tr').each(function(){
			var v=$(this).children("td:first").text();
			if (v=='合計'){
				var rowCount =$('#'+target+'_datagrid').jqGrid('getGridParam', 'records');
				if( $(this).index() !=rowCount){
					var rowid=$(this).attr('id');
					var rowData = $('#'+target+'_datagrid').jqGrid ('getRowData',rowid );
					$('#'+target+'_datagrid').delRowData(rowid); 
					$('#'+target+'_datagrid').jqGrid('addRowData', undefined, rowData, "last");  					  				
				}
			}  		
		});	
	}		
  	
	</script>
</head>
<body>
<div class="serachTypeArea">
	<table style="white-space:nowrap">
		<tr>
			<th>集計類別</th>
			<td><s:select id="searchType"  list="{'日集計','曜日集計','月集計'}" theme="simple">  </s:select></td>
		</tr>
	</table>
</div>

<div id="searchbar" class="serachArea">
	<s:form id="dataForm0" theme="simple" >			
		<table style="white-space:nowrap">
			<tr>
			 	<th>時間</th><td ><input id="dateFrom0" name="dateFrom" key="value" label="开始日"  class="datebox"/></td>	 
				<td width=5></td>
				<td><a id="buttonSearch0" href="#" class="button">検索</a></td>
				<td><a id="buttonPrior0" href="#" class="button">前日</a></td>
				<td><a id="buttonNext0" href="#" class="button">翌日</a></td>
				<td><a id="buttonExport0" href="#" style="width:100px" class="button"  >エクスポート</a></td>
			</tr>
		</table>
	</s:form>
	
	<s:form id="dataForm1" theme="simple" cssClass="hide">
		<table style="white-space:nowrap">
			<tr>
			 	<th>時間</th>
			 	<td ><s:textfield id="dateFrom1" name="dateFrom" key="value" label="开始日"  cssClass="datebox"/></td>
			 	<th>  ～</th><td ><s:textfield id="dateTo1" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>	 			
				<th>週間</th><td >
					<select id="week" name="weekIndex"  >
					 <option value ="0">月</option>
					 <option value ="1">火</option>
					 <option value ="2">水</option>
					 <option value ="3">木</option>
					 <option value ="4">金</option>
					 <option value ="5">土</option>
					 <option value ="6">日</option>
					 </select></td>	
				<td width=5></td>
				<td><a id="buttonSearch1" href="#"  class="button">検索</a></td>
				<td><a id="buttonExport1" href="#" style="width:100px" class="button"  >エクスポート</a></td>
			</tr>
		</table>	
	</s:form>
		
	<s:form id="dataForm2" theme="simple" cssClass="hide">			
		<table style="white-space:nowrap">
			<tr>
			 	<th>時間帯</th><td ><s:textfield id="dateFrom2" name="dateFrom" key="value" label="开始日"  cssClass="datebox" /></td>				
				<th>～</th><td ><s:textfield id="dateTo2" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>
				<td width=5></td>
				<td><a id="buttonSearch2" href="#" class="button" >検索</a></td>	
				<td><a id="buttonExport2" href="#" style="width:100px" class="button"  >エクスポート</a></td>							
			</tr>
		</table>
	</s:form>	
</div>

<div style="float:left" >
	<table><tr><td>					
		<span id="myIndicator" class='hide'>
			<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
		 </span>
	</td></tr></table>
</div>

<hr style="clear:both">

<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">	
	<div >
		<div id="masterGrid_day"  class="grid"></div>
		<div id="chartdiv_day"  class="chart"></div>
		<div id="detailGrid_day"  class="grid"></div>
	</div>
	<div class="hide">		
		<div id="masterGrid_week" class="grid"></div>
		<div id="chartdiv_week" class="chart"></div>
		<div id="detailGrid_week"  class="grid" ></div>				
	</div>
	<div class="hide">
		<div id="masterGrid_month"   class="grid"></div>
		<div id="chartdiv_month"  class="chart"></div>
		<div id="detailGrid_month"  class="grid"></div>
	</div>
	
	<div id="noResult" title="メッセージ" style="display:none;">
 		 <p>该当する検索结果がありません。</p>
 		 <p>别の条件でもう一度検索してください。</p>
	</div>
</div>

</body>
